import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectLabelViewDuck } from 'ducks'
import { Query } from 'react-apollo'
import getProject from 'graphql/getProject.graphql'
/* import FetchPageInfo from "./fetchPageInfo"; */
import Project from './project'

const ProjectInfo = ({
  pid, actionReciveProject, isProjectInit, isProjectHasClass,
}) => (
  <Query
    query={getProject}
    variables={{ projectId: pid }}
    fetchPolicy="network-only"
    onCompleted={data => actionReciveProject({
      id: data.project[0].id,
      name: data.project[0].name,
      classes: data.project_class,
      tags: data.tag,
    })
    }
  >
    {({ loading, error, data }) => {
      if (loading) return 'loading...'
      if (error) return `Error! ${error.message}`
      if (data.project.length === 0) {
        return null
      }
      if (isProjectInit) {
        if (isProjectHasClass) {
          /* return <FetchPageInfo pid={pid} /> */
          return <Project pid={pid} />
        }
        return '当前项目没有标注类型请联系管理员。'
      }
      return null
    }}
  </Query>
)

const mapStateToProps = state => ({
  isProjectInit: projectLabelViewDuck.selectors.isProjectInit(state),
  isProjectHasClass: projectLabelViewDuck.selectors.isProjectHasClass(state),
})

const mapDispatchToProps = {
  actionReciveProject: projectLabelViewDuck.creators.actionReciveProject,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ProjectInfo)
